<script setup>
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import * as echarts from 'echarts'
import total from '../../../../assets/imgs/lj_nor.png'
import {
  getDangerTotalData,
  getScreenAlterTotal,
} from '@/api/screen/home/index.js'
import { ElMessage } from 'element-plus'
import { getYesterdayDeal, getMonthDeal, getStorageYesterdayDeal, getStorageMonthDeal } from '../api'


const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const commodityHouseChartRef = ref(null)
const storageHouseChartRef = ref(null)

const getCommodityHouseChartOption = (data) => {
  return {
    grid: {
      top: '20%',
      left: '12%',
      bottom: '13%',
      right: '16%',
    },
    legend: {
      show: true,
      right: 'center',
      itemWidth: 6,
      itemHeight: 6,
      // width: '100%',
      textStyle: {
        color: '#b4d3ed',
        fontSize: 12,
      },
    },
    tooltip: {
      show: true,
    },
    xAxis: {
      data: data['xAxis'],
      axisLabel: {
        showMaxLabel: true,
        textStyle: {
          color: '#ffffff',
          fontSize: 9,
        },
        rotate: -60,
        padding: [3, 0, 0, 0],
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgb(64,77,93)',
          width: 1,
        },
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: 'rgb(64,77,93)',
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        name: '可售套数',
        type: 'value',
        position: 'left',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: true,
        },
      },
      {
        name: '可售面积/平方',
        type: 'value',
        position: 'right',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
          // margin: 20, // 增加标签与轴的距离
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: false,
        },
        offset: 10, // 向右偏移确保数字显示完整
      },
    ],
    series: [
      {
        name: '可售套数',
        type: 'bar',
        barWidth: 10,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'outside', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        yAxisIndex: 0,
        itemStyle: {
          // color: '#24d4b8',
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#9f50fe' // 0% 处的颜色
            }, {
                offset: 1, color: '#199dfb' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        data: data['可售套数'], // [7000,14000,6500,21000,17000,25000],
      },
      {
        name: '可售面积/平方',
        type: 'line',
        smooth: true,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'top', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        itemStyle: {
          color: '#ffff00',
        },
        yAxisIndex: 1,
        data: data['可售面积'], // [2000,11000,8000,21000,24000,3800],
      }
    ],
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c21' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c89' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
  }
  
}

const getStorageHouseChartOption = (data) =>{
  return {
    grid: {
      top: '30%',
      left: '12%',
      bottom: '13%',
      right: '16%',
    },
    legend: {
      show: true,
      right: 'center',
      itemWidth: 6,
      itemHeight: 6,
      width: '100%',
      textStyle: {
        color: '#b4d3ed',
        fontSize: 11,
      },
    },
    tooltip: {
      show: true,
    },
    xAxis: {
      data: data['xAxis'], // ['柏梓镇','宝龙镇','别口镇','崇龛镇','古溪镇','花岩镇'],
      axisLabel: {
        rotate: -60,
        showMaxLabel: true,
        textStyle: {
          color: '#ffffff',
          fontSize: 9,
        },
        padding: [3, 0, 0, 0],
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgb(64,77,93)',
          width: 1,
        },
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: 'rgb(64,77,93)',
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        name: '成交量/套',
        type: 'value',
        position: 'left',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: false,
        },
      },
      {
        name: '成交面积/平方',
        type: 'value',
        position: 'right',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
          // margin: 20, // 增加标签与轴的距离
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: false,
        },
        offset: 10, // 向右偏移确保数字显示完整
      },
    ],
    series: [
      {
        name: '住宅套数',
        type: 'bar',
        barWidth: 6,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'outside', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        yAxisIndex: 0,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#18d6ff' // 0% 处的颜色
            }, {
                offset: 1, color: '#029bff' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
        },
        data: data['住宅套数'], // [310,400,380,180,220,360],
      },
      {
        name: '住宅面积',
        type: 'bar',
        barWidth: 6,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'inside', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        yAxisIndex: 1,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#c85fff' // 0% 处的颜色
            }, {
                offset: 1, color: '#1191ff' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
        },
        data: data['住宅面积'], //[40,70,100,40,40,40],
      },
      {
        name: '办公楼套数',
        type: 'bar',
        barWidth: 6,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'outside', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        yAxisIndex: 0,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#51ff8e' // 0% 处的颜色
            }, {
                offset: 1, color: '#079ff6' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
        },
        data: data['办公楼套数'], // [123,45,56,145,123,23],
      },
      {
        name: '办公楼面积',
        type: 'bar',
        barWidth: 6,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'inside', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        yAxisIndex: 1,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#fffc18' // 0% 处的颜色
            }, {
                offset: 1, color: '#159fec' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
        },
        data: data['办公楼面积'], // [40,70,100,40,40,40],
      },
      {
        name: '其他套数',
        type: 'line',
        // smooth: true,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'top', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        itemStyle: {
          color: '#ff7f46',
        },
        yAxisIndex: 0,
        data: data['其他套数'], // [12040,18070,38100,6040,9040,5040],
      },
      {
        name: '其他面积',
        type: 'line',
        // smooth: true,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'top', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        itemStyle: {
          color: '#ffff00',
        },
        yAxisIndex: 1,
        data: data['其他面积'], // [2040,3070,8100,4040,4040,4040],
      },
      {
        name: '商业营业用房套数',
        type: 'line',
        // smooth: true,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'top', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        itemStyle: {
          color: '#02ff02',
        },
        yAxisIndex: 0,
        data: data['商业营业用房套数'], // [123,234,345,456,567,678],
      },
      {
        name: '商业营业用房面积',
        type: 'line',
        // smooth: true,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'top', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        itemStyle: {
          color: '#b736fa',
        },
        yAxisIndex: 1,
        data: data['商业营业用房面积'], // [2040,3070,8100,4040,4040,4040],
      },
      {
        name: '经济适用住房套数',
        type: 'line',
        // smooth: true,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'top', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        itemStyle: {
          color: '#e4870d',
        },
        yAxisIndex: 0,
        data: data['经济适用住房套数'], // [123,234,345,456,567,678],
      },
      {
        name: '经济适用住房面积',
        type: 'line',
        // smooth: true,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'top', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        itemStyle: {
          color: '#016df2',
        },
        yAxisIndex: 1,
        data: data['经济适用住房面积'], // [2040,3070,8100,4040,4040,4040],
      },
    ],
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c21' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c89' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
  }
}

const updateCommodityData = () => {
  const data = commodityData.value[activeName_commodity.value]
  commodityHouseChartRef.value?.updateOption(getCommodityHouseChartOption(data))
  commodityNum.value = data['成交数量']
  commodityArea.value = data['成交面积']
}
const updateStorageData = () => {
  const data = storageData.value[activeName_storage.value]
  storageHouseChartRef.value?.updateOption(getStorageHouseChartOption(data))
  storageNum.value = data['成交数量']
  storageArea.value = data['成交面积']
}

const commodityNum = ref(0)
const commodityArea = ref(0)
const commodityData = ref({
  lastDay: {},
  curMonth: {}
})
const storageNum = ref(0)
const storageArea = ref(0)
const storageData = ref({
  lastDay: {},
  curMonth: {}
})
const activeName_commodity = ref('lastDay')
const activeName_storage = ref('lastDay')
const handleChangeTab = (activeName, type) => {
  if (type === 'commodity') {
    activeName_commodity.value = activeName
    updateCommodityData()
  } else {
    activeName_storage.value = activeName
    updateStorageData()
  }
}

const reqData = () => {
  Promise.all([
    getYesterdayDeal(), getMonthDeal(), getStorageYesterdayDeal(), getStorageMonthDeal()
  ])
  .then((resList) => {
    if (resList[0].success) {
      commodityData.value.lastDay = resList[0].data
      activeName_commodity.value = 'lastDay'
      updateCommodityData()
    }
    if (resList[1].success) {
      commodityData.value.curMonth = resList[1].data
    }
    if (resList[2].success) {
      storageData.value.lastDay = resList[2].data
      activeName_storage.value = 'lastDay'
      updateStorageData()
    }
    if (resList[3].success) {
      storageData.value.curMonth = resList[3].data
    }
  })
}

onMounted(() => {
  reqData()
  // setTimeout(() => {
  //   updateTotalData()
  // }, 500)
})

onUnmounted(() => {})
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="商品房" class="commodity-house">
      <div class="total-area">
        <div class="my-tabs">
          <div class="before dots">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
          <div class="tabs">
            <div class="tab-item" :class="{ on: activeName_commodity == 'lastDay' }" @click="handleChangeTab('lastDay', 'commodity')">昨日成交情况</div>
            <div class="tab-item" :class="{ on: activeName_commodity == 'curMonth' }" @click="handleChangeTab('curMonth', 'commodity')">当月成交情况</div>
          </div>
          <div class="after dots">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
        <div class="panel-list">
          <div class="panel">
            <div class="value">
              {{ commodityNum }}
              <span class="unit">套</span>
            </div>
            <div class="title">成交套数</div>
          </div>
          <div class="divider"></div>
          <div class="panel">
            <div class="value">
              {{ commodityArea }}
              <span class="unit">平</span>
            </div>
            <div class="title">成交面积</div>
          </div>
        </div>
        <div class="chart">
          <draw-echarts
            ref="commodityHouseChartRef"
            width="420"
            height="320"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>
    </card>
    <card name="库存房" class="storage-house">
      <div class="total-area">
        <div class="my-tabs">
          <div class="before dots">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
          <div class="tabs">
            <div class="tab-item" :class="{ on: activeName_storage == 'lastDay' }" @click="handleChangeTab('lastDay', 'storage')">昨日成交情况</div>
            <div class="tab-item" :class="{ on: activeName_storage == 'curMonth' }" @click="handleChangeTab('curMonth', 'storage')">当月成交情况</div>
          </div>
          <div class="after dots">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
        <div class="panel-list">
          <div class="panel">
            <div class="value">
              {{ storageNum }}
              <span class="unit">套</span>
            </div>
            <div class="title">成交套数</div>
          </div>
          <div class="divider"></div>
          <div class="panel">
            <div class="value">
              {{ storageArea }}
              <span class="unit">平</span>
            </div>
            <div class="title">成交面积</div>
          </div>
        </div>
        <div class="chart">
          <draw-echarts
            ref="storageHouseChartRef"
            width="420"
            height="320"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .my-tabs {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #bbdbf6;
      height: 32px;
      line-height: 32px;
      margin-bottom: 10px;

      .dots {
        display: flex;
        align-items: center;
        gap: 5px;
        i {
          display: inline-block;
          width: 3px;
          height: 3px;
          border-radius: 3px;
          background: #bbdbf6;
        }
      }

      .tabs {
        display: flex;
      }

      .tab-item {
        position: relative;
        cursor: pointer;
        padding: 0 6px;
        margin: 0 6px;
        font-size: 13px;
      }
      .tab-item::before {
        content: '';
        position: absolute;
        width: 2px;
        height: 0.7em;
        right: -7px;
        top: 12px;
        background-color: #ffffff;
      }
      .tab-item:last-child::before {
        display: none;
      }
      .tab-item.on {
        color: #f8ea9a;
      }
      .tab-item.on::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,rgba(248, 234, 154, 0.01), rgba(248, 234, 154, 0.4), rgba(248, 234, 154, 0.01));
      }
  }

  .panel-list {
    background: linear-gradient(180deg,#071e3a, #036496);
    width: 340px;
    height: 60px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;

    .divider {
      width: 6px;
      height: 90px;
      background: linear-gradient(#15639822, #156398, #15639822);
      opacity: 0.1;
    }

    .panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .value {
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 3px;
      }
      .unit {
        font-size: 16px;
        color: #8497b8;
      }
    }
  }

  .exchange-overview {
    height: 900px;

  }
}
</style>
